<!DOCTYPE html>
<html>

<head>
    <title>{$Think.config.app_name}</title>
    {include file="public/head"/}
    <style>
        input[type=checkbox] {
            opacity: 0;
            display: none !important;
        }

        input[type=checkbox]+label {
            display: inline-block;
            cursor: pointer;
            font-size: 12px;
            border: 1px solid #009688;
            padding: 2px 5px;
            user-select: none;
            -webkit-user-select: none;
        }

        input[type=checkbox]+label::before {
            display: inline-block;
            content: "不生成";
            text-align: center;
            font-size: 12px;
            color: white;
            background: #ccc;
            border: 1px solid #ccc;
            padding: 2px 5px;
            margin: -2px -5px;
            margin-right: 5px;
        }

        input[type=checkbox]:checked+label::before {
            display: inline-block;
            content: "请生成";
            background: #009688;
            border: 1px solid #009688;
        }

        .checkItem {
            position: relative;
            display: inline-block;
            padding: 8px 0px;
            margin-right: 10px;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div id="LAY_app" class="layadmin-tabspage-none">
        <div class="layui-layout layui-layout-admin">
            {include file="public/menu"/}
            <div class="layui-body root_box" v-cloak>
                <fieldset class="layui-elem-field">
                    <legend>代码生成器</legend>
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">节点名称</label>
                            <div class="layui-input-block">
                                <input type="text" v-model="code_title" placeholder="如 学生" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">控制器</label>
                            <div class="layui-input-block">
                                <input type="text" v-model="code_controller" placeholder="如 Student" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">生成选项</label>
                            <div class="layui-input-block">
                                <div class="checkItem">
                                    <input lay-ignore v-model="c_node" type="checkbox" checked="checked" id="c_node"
                                        class="layui-form-checkbox">
                                    <label for="c_node">节点</label>
                                </div>
                                <div class="checkItem">
                                    <input lay-ignore v-model="c_table" type="checkbox" checked="checked" id="c_table"
                                        class="layui-form-checkbox">
                                    <label for="c_table">数据表</label>
                                </div>
                                <div class="checkItem">
                                    <input lay-ignore v-model="c_controller" type="checkbox" checked="checked"
                                        id="c_controller" class="layui-form-checkbox">
                                    <label for="c_controller">控制器</label>
                                </div>
                                <div class="checkItem">
                                    <input lay-ignore v-model="c_view" type="checkbox" checked="checked" id="c_view"
                                        class="layui-form-checkbox">
                                    <label for="c_view">模板文件</label>
                                </div>
                                <div class="checkItem">
                                    <input lay-ignore v-model="c_api" type="checkbox" checked="checked" id="c_api"
                                        class="layui-form-checkbox">
                                    <label for="c_api">API</label>
                                </div>
                                <div class="checkItem">
                                    <input lay-ignore v-model="c_model" type="checkbox" checked="checked" id="c_model"
                                        class="layui-form-checkbox">
                                    <label for="c_model">Model</label>
                                </div>
                            </div>
                        </div>
                        <div style="margin-left:110px;margin-right:5px;">
                            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                                <thead>
                                    <tr>
                                        <td>
                                            字段名
                                        </td>
                                        <td>
                                            类型
                                        </td>
                                        <td>
                                            长度
                                        </td>
                                        <td>
                                            描述
                                        </td>
                                        <td>
                                            默认值
                                        </td>
                                        <td>
                                            操作
                                        </td>
                                    </tr>
                                </thead>
                                <tbody class="rows">
                                    <tr v-for="(item, index) in fieldList" :key="index">
                                        <td style="padding:0px;">
                                            <input type="text" placeholder="字段名称 小写"
                                                class="layui-input layui-input-inline"
                                                style="background-color:#f5f5f5;width:100%;border:none;"
                                                v-model="item.field_name">
                                        </td>
                                        <td style="padding:0px;">
                                            <input type="text" placeholder="字段类型 varchar"
                                                class="layui-input layui-input-inline"
                                                style="background-color:#f5f5f5;width:100%;border:none;"
                                                v-model="item.field_datatype">
                                        </td>
                                        <td style="padding:0px;">
                                            <input type="text" placeholder="字段长度 255"
                                                class="layui-input layui-input-inline"
                                                style="background-color:#f5f5f5;width:100%;border:none;"
                                                v-model="item.field_length">
                                        </td>
                                        <td style="padding:0px;">
                                            <input type="text" placeholder="测试字段" class="layui-input layui-input-inline"
                                                style="background-color:#f5f5f5;width:100%;border:none;"
                                                v-model="item.field_desc">
                                        </td>
                                        <td style="padding:0px;">
                                            <input type="text" placeholder="默认值" class="layui-input layui-input-inline"
                                                style="background-color:#f5f5f5;width:100%;border:none;"
                                                v-model="item.field_default">
                                        </td>
                                        <td style="padding:0px;text-align:center;">
                                            <!--<a @click="deleteRow" href="javascript:;" :index="index">删除</a>-->
                                            <a @click="deleteRow" :index="index"
                                                class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-empty"
                                                title="删除字段"></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-form-item" style="margin-top:5px;">
                            <div class="layui-input-block">
                                <button @click="addRow" class="layui-btn layui-btn-sm"><i
                                        class="iconfont icon-tianjia"></i>添加字段</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="text-align:right;padding-right:5px;">
                                <button class="layui-btn" lay-submit="" type="button"
                                    onclick="buildCode()">立即生成</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <div class="layui-card"
                                    style="background-color:#f5f5f5;border:1px solid #ddd;color:#666;font-size:12px;">
                                    <div class="layui-card-body">
                                        <font color=#000>代码生成使用说明</font><br> 1.节点名称尽可能填写节点的描述，将出现在菜单、节点列表等页面中；
                                        <br> 2.控制器请填写小写英文，首字母将自动大写，控制器名称对应表名称；
                                        <br> 3.选项请按需选择，如数据库已用其他工具设计好，不选中生成数据表即可；
                                        <br> 4.字段描述很重要，表单标题将优先使用字段描述，如不填写则使用字段名称；
                                        <br> 5.为了系统安全，默认不生成任何项目，请按实际需要进行勾选操作，谢谢！
                                        <br>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</body>
{include file="public/foot"/}
<script>
    var app = new Vue({
        el: ".root_box",
        data: {
            fieldList: [{
                field_name: "",
                field_datatype: "varchar",
                field_length: "255",
                field_desc: "",
                field_default: ""
            }],
            c_controller: false,
            c_view: false,
            c_table: false,
            c_node: false,
            c_api: false,
            c_model: false,
            code_title: "测试节点",
            code_controller: "test"
        },
        created: function () { },
        methods: {
            addRow: function () {
                this.fieldList.push({
                    field_name: "",
                    field_datatype: "varchar",
                    field_length: "255",
                    field_desc: "",
                    field_default: ""
                });
            },
            deleteRow: function (e) {
                var index = e.target.attributes.index.value;
                this.fieldList.splice(index, 1);
            },
            submit: function () {
                _loading();
                $.post("/api/system/build", Object.assign({
                    c_node: this.c_node,
                    c_controller: this.c_controller,
                    c_view: this.c_view,
                    c_table: this.c_table,
                    c_api: this.c_api,
                    c_model: this.c_model,
                    code_title: this.code_title,
                    code_controller: this.code_controller,
                    fieldList: this.fieldList
                }, PostCommon), function (data, status) {
                    _hideLoading();
                    if (data.code != 200) {
                        _alert(data.msg);
                    } else {
                        //询问框
                        layer.confirm('代码生成成功，是否立即查看？', {
                            skin: 'layui-layer-demo',
                            btn: ["立即查看", "继续生成"],
                            closeBtn: 1,
                            shade: [0.6, "#333"],
                            shadeClose: false,
                            title: '生成成功'
                        }, function () {
                            location.href = '/admin/' + app.code_controller.toLocaleLowerCase();
                        });
                    }
                });
            },
        }
    });

    function buildCode() {
        _confirm("是否确认进行代码生成？？？", "系统提示", function () {
            app.submit();
        });
    }
</script>

</html>